/**
  * Please read wiki article 'CSS Variables and Themes' before editing this file.
  *
  * All variable names are based on the design system and serve the purpose of bridging between the design and
  * development teams. Other variables should be put elsewhere.
  *
  * Variable format: --type-purpose-color-importance-state, e.g. --text-body1-black-high-hover. Not all parts need
  * to be added for all variables, and some parts may have multiple words (e.g. `line-height`).
  *
  * When styling, always use the most specific variable, e.g. if you are styling an element which should have
  * body (1) text, use `--text-color-high` rather than `--text-color-white-high` so that it changes with
  * the theme.
  *
  * The variables at the bottom will update their value when switching theme, and the attributes can be assigned
  * to the body, or any element within it to give that element and its children a different theme, e.g. to demo
  * themes, or for sections which are inverted compared to the rest of the theme (accents, etc.).
  *
  * Themes can be forced so that they are always on using the `-forced` suffix, for example the nav bar is always
  * dark mode.
  *
  * Color must be in RGBA format. e.g. rgba(0, 0, 0, 1)
  *
  * Custom Alpha Level can be added to override the alpha level when required.
  * (ONLY for Label, icon, avatar, navbar, secondary, surface, stroke)
  * Custom alpha var name must be starts with color var {type}. e.g. --label-black: rgba(0, 0, 0, var(--label-alpha, 1))
  */


/*** Section 1: constants that will not vary by theme, but may only be used by one theme at the moment ***/

body,
.custom-alpha {

    /* colors */

        /* left main navbar */
            --navbar-background: rgba(51, 51, 51, var(--navbar-alpha, 1));
            --navbar-item-hover-background: rgba(34, 34, 34, var(--navbar-alpha, 1));


        /* icons */

            --icon-agnostic: rgba(0, 0, 0, var(--icon-alpha, 1));

        /* labels */

            --label-red: rgba(255, 97, 92, var(--label-alpha, 1));
            --label-orange: rgba(249, 166, 70, var(--label-alpha, 1));
            --label-yellow: rgba(244, 206, 74, var(--label-alpha, 1));
            --label-green: rgba(109, 204, 80, var(--label-alpha, 1));
            --label-blue: rgba(75, 184, 243, var(--label-alpha, 1));
            --label-purple: rgba(208, 136, 225, var(--label-alpha, 1));
            --label-grey: rgba(164, 164, 167, var(--label-alpha, 1));

            --label-red-hover: rgba(255, 98, 92, var(--label-alpha, 0.6));
            --label-orange-hover: rgba(249, 166, 70, var(--label-alpha, 0.6));
            --label-yellow-hover: rgba(244, 206, 74, var(--label-alpha, 0.6));
            --label-green-hover: rgba(109, 204, 80, var(--label-alpha, 0.6));
            --label-blue-hover: rgba(75, 184, 243, var(--label-alpha, 0.6));
            --label-purple-hover: rgba(208, 136, 225, var(--label-alpha, 0.6));
            --label-grey-hover: rgba(164, 164, 167, var(--label-alpha, 0.6));

        /* avatars */

            --avatar-blue: linear-gradient(225deg, rgba(85, 210, 240, var(--avatar-alpha, 1)) 0%, rgba(43, 166, 222, var(--avatar-alpha, 1)) 100%);
            --avatar-eggplant: linear-gradient(225deg, rgba(188, 32, 134, var(--avatar-alpha, 1)) 0%, rgba(136, 14, 79, var(--avatar-alpha, 1)) 100%);
            --avatar-gold: linear-gradient(225deg, rgba(255, 210, 0, var(--avatar-alpha, 1)) 0%, rgba(255, 165, 0, var(--avatar-alpha, 1)) 100%);
            --avatar-green: linear-gradient(225deg, rgba(95, 219, 0, var(--avatar-alpha, 1)) 0%, rgba(49, 181, 0, var(--avatar-alpha, 1)) 100%);
            --avatar-jade: linear-gradient(225deg, rgba(0, 189, 178, var(--avatar-alpha, 1)) 0%, rgba(0, 137, 123, var(--avatar-alpha, 1)) 100%);
            --avatar-orange: linear-gradient(225deg, rgba(255, 167, 0, var(--avatar-alpha, 1)) 0%, rgba(255, 111, 0, var(--avatar-alpha, 1)) 100%);
            --avatar-purple: linear-gradient(225deg, rgba(228, 38, 155, var(--avatar-alpha, 1)) 0%, rgba(197, 17, 98, var(--avatar-alpha, 1)) 100%);
            --avatar-red: linear-gradient(225deg, rgba(255, 98, 108, var(--avatar-alpha, 1)) 0%, rgba(255, 51, 58, var(--avatar-alpha, 1)) 100%);
            --avatar-salmon: linear-gradient(225deg, rgba(255, 137, 137, var(--avatar-alpha, 1)) 0%, rgba(255, 82, 82, var(--avatar-alpha, 1)) 100%);
            --avatar-sky: linear-gradient(225deg, rgba(154, 234, 255, var(--avatar-alpha, 1)) 0%, rgba(97, 210, 255, var(--avatar-alpha, 1)) 100%);
            --avatar-teal: linear-gradient(225deg, rgba(0, 213, 226, var(--avatar-alpha, 1)) 0%, rgba(0, 172, 193, var(--avatar-alpha, 1)) 100%);
            --avatar-yellow: linear-gradient(225deg, rgba(255, 235, 0, var(--avatar-alpha, 1)) 0%, rgba(255, 211, 0, var(--avatar-alpha, 1)) 100%);

        /* Transparent images background */

            --image-background: #fff;

    /* text */

        /* base colors */

            /* black */

                --text-color-black-higher: rgba(51, 51, 51, 1);
                --text-color-black-high: rgba(51, 51, 51, 1);
                --text-color-black-medium: rgba(51, 51, 51, 0.7);
                --text-color-black-low: rgba(51, 51, 51, 0.4);
                --text-color-black-medium-sensitive: rgba(51, 51, 51, 0.35);

            /* white */

                --text-color-white-higher: rgba(255, 255, 255, 1);
                --text-color-white-high: rgba(255, 255, 255, 1);
                --text-color-white-medium: rgba(255, 255, 255, 0.7);
                --text-color-white-low: rgba(255, 255, 255, 0.4);
                --text-color-white-medium-sensitive: rgba(255, 255, 255, 0.35);

            /* blue */
                --text-color-blue: rgba(43, 166, 222, 1);

        /* font family */

            --text-font-family: "Inter", sans-serif;
            --text-font-family-code: "source_code_proregular", monospace;

        /* font family : ONLY FOR PRODUCT PAGES */

            --text-font-family-second-bold: "montserrat_bold", "montserrat", arial, sans-serif;
            --text-font-family-second-light: "montserrat_light", arial, sans-serif;
            --text-font-family-second-regular: "montserrat", arial, sans-serif;
            --text-font-family-second-semibold: "montserrat_semibold", arial, sans-serif;

        /* font */

            --text-h0: 30px/44px var(--text-font-family);
            --text-h1: 24px/36px var(--text-font-family);
            --text-h2: 20px/30px var(--text-font-family);
            --text-h3: 16px/24px var(--text-font-family);
            --text-body1: 14px/20px var(--text-font-family);
            --text-body2: 12px/18px var(--text-font-family);
            --text-caption: 10px/16px var(--text-font-family);
            --text-data: 40px/60px var(--text-font-family);

            --text-h0-bold: 600 30px/44px var(--text-font-family);
            --text-h1-bold: 600 24px/36px var(--text-font-family);
            --text-h2-bold: 600 20px/30px var(--text-font-family);
            --text-h3-bold: 600 16px/24px var(--text-font-family);
            --text-body1-bold: 600 14px/20px var(--text-font-family);
            --text-body2-bold: 600 12px/18px var(--text-font-family);

        /* this is temporary until bug bounty moves to wordpress */

            --text-h0-bb: 36px/54px var(--text-font-family);
            --text-h0-bb-bold: 600 36px/54px var(--text-font-family);

        /* body2, caption and data are currently never bold */

            --text-code1: 12px/24px var(--text-font-family-code);

        /* font : ONLY FOR PRODUCT PAGES */

            --text-h2-montserrat-bold: 20px/30px var(--text-font-family-second-bold);

    /* transitions */

        --transition-all: all 800ms ease-in-out;
        --transition-border: border 200ms ease-in-out;
        --transition-color: color 200ms ease-in-out;
        --transition-bg-color: background-color 200ms ease-in-out;
        --transition-height: height 200ms ease-in-out;
        --transition-opacity: opacity 200ms ease-in-out;
        --transition-padding: padding 200ms ease-in-out;
        --transition-shadow: box-shadow 200ms ease-in-out;
        --transition-width: width 200ms ease-in-out;

    /* FM selection */
        --hover-grey-main: #444444;

    /* Brand colors */
        --mobile-brand-it: rgb(24, 117, 255);
}


/*** Section 2: shorthand variables that will automatically update on changing theme ***/

/* light theme */
.theme-light,
.theme-light .custom-alpha,
html .theme-light-forced {

    /* secondary colors */

        --secondary-blue: rgba(43, 166, 222, var(--secondary-alpha, 1));
        --secondary-green: rgba(29, 176, 123, var(--secondary-alpha, 1));
        --secondary-orange: rgba(255, 166, 0, var(--secondary-alpha, 1));
        --secondary-red: rgba(253, 62, 56, var(--secondary-alpha, 1));
        --secondary-white: rgba(255, 255, 255, var(--secondary-alpha, 1));
        --secondary-grey: rgba(204, 204, 204, var(--secondary-alpha, 1));

    /* surfaces */

        --surface-main: rgba(255, 255, 255, var(--surface-alpha, 1));
        --surface-grey-1: rgba(250, 250, 250, var(--surface-alpha, 1));
        --surface-grey-2: rgba(237, 237, 237, var(--surface-alpha, 1));
        --surface-grey-3: var(--surface-grey-1);
        --surface-grey-4: rgba(238, 238, 238, var(--surface-alpha, 1));
        --surface-grey-5: var(--surface-main);
        --surface-grey-6: var(--surface-grey-2);
        --surface-light-grey: /* not present in this theme */;
        --surface-mid-grey: rgba(204, 204, 204, var(--surface-alpha, 1));
        --surface-dark-grey: linear-gradient(180deg, rgba(85, 85, 85, var(--surface-alpha, 1)) 0%, rgba(68, 68, 68, var(--surface-alpha, 1)) 100%);
        --surface-black: rgba(0, 0, 0, var(--surface-alpha, 1));
        --surface-black-bar: rgba(0, 0, 0, var(--surface-alpha, 0.7));
        --surface-scrim: rgba(255, 255, 255, var(--surface-alpha, 0.32));
        --surface-warning: linear-gradient(180deg, rgba(255, 210, 0, var(--surface-alpha, 1)) 0%, rgba(255, 165, 0, var(--surface-alpha, 1)) 100%);
        --surface-error: linear-gradient(180deg, rgba(255, 113, 105, var(--surface-alpha, 1)) 0%, rgba(253, 62, 56, var(--surface-alpha, 1)) 100%);
        --surface-error-hover: linear-gradient(180deg, rgba(255, 95, 85, var(--surface-alpha, 1)) 0%, rgba(252, 48, 42, var(--surface-alpha, 1)) 100%);
        --surface-error-active: linear-gradient(180deg, rgba(255, 132, 123, var(--surface-alpha, 1)) 0%, rgba(253, 76, 69, var(--surface-alpha, 1)) 100%);
        --surface-progress-background: linear-gradient(180deg, rgba(85, 85, 85, var(--surface-alpha, 0.3)) 0%, rgba(68, 68, 68, var(--surface-alpha, 0.3)) 100%);
        --surface-overlay: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(20, 20, 20, 0.3) 100%);
        --surface-highlight-1: rgba(250, 250, 250, var(--surface-alpha, 0.8));
        --surface-highlight-2: rgba(250, 250, 250, var(--surface-alpha, 0.4));
        --surface-inner-shadow: rgba(250, 250, 250, var(--surface-alpha, 0.6));
        --surface-light-red: rgba(255, 234, 235, var(--surface-alpha, 1));

    /* strokes */

        --stroke-main: rgba(255, 255, 255, var(--stroke-alpha, 1));
        --stroke-grey-1: rgba(250, 250, 250, var(--stroke-alpha, 1));
        --stroke-grey-2: rgba(238, 238, 238, var(--stroke-alpha, 1));
        --stroke-grey-3: rgba(250, 250, 250, var(--stroke-alpha, 1));
        --stroke-grey-4: rgba(238, 238, 238, var(--stroke-alpha, 1));
        --stroke-grey-6: rgba(238, 238, 238, var(--stroke-alpha, 1));
        --stroke-dark-grey: rgba(85, 85, 85, var(--stroke-alpha, 1));
        --stroke-mid-grey: rgba(204, 204, 204, var(--stroke-alpha, 1));
        --stroke-black: rgba(0, 0, 0, var(--stroke-alpha, 1));
        --stroke-info: rgba(43, 166, 222, var(--stroke-alpha, 1));
        --stroke-success: rgba(0, 191, 165, var(--stroke-alpha, 1));
        --stroke-warning: rgba(255, 153, 36, var(--stroke-alpha, 1));
        --stroke-error: rgba(253, 62, 56, var(--stroke-alpha, 1));
        --stroke-highlight: rgba(250, 250, 250, var(--stroke-alpha, 1));
        --stroke-scrim: rgba(255, 255, 255, var(--stroke-alpha, 0.32));
        --stroke-overlay-background: rgba(204, 204, 204, var(--stroke-alpha, 0.9));

    /* icons */

        --icon-rest: rgba(51, 51, 51, var(--icon-alpha, 0.7));
        --icon-inactive: rgba(51, 51, 51, var(--icon-alpha, 0.3));
        --icon-active: rgba(51, 51, 51, var(--icon-alpha, 1));

    /* table */

        --table-border: rgba(241, 241, 241, 1);

    /* text */

        --text-color-higher: var(--text-color-black-higher);
        --text-color-high: var(--text-color-black-high);
        --text-color-medium: var(--text-color-black-medium);
        --text-color-low: var(--text-color-black-low);
        --text-color-info: rgba(43, 166, 222, 1);
        --text-color-success: rgba(0, 191, 165, 1);
        --text-color-warning: rgba(255, 153, 36, 1);
        --text-color-error: rgba(253, 62, 56, 1);
        --text-color-medium-sensitive: var(--text-color-black-medium-sensitive);
        --text-color-highlight: rgb(0 191 165 / 0.3);

    /* button */

        --button-fill-positive: linear-gradient(180deg, rgba(62, 216, 178, 1) 0%, rgba(29, 176, 123, 1) 100%);
        --button-fill-positive-hover: linear-gradient(180deg, rgba(47, 206, 161, 1) 0%, rgba(21, 159, 103, 1) 100%);
        --button-fill-positive-active: linear-gradient(180deg, rgba(76, 255, 194, 1) 0%, rgba(36, 192, 141, 1) 100%);

        --button-fill-blue: linear-gradient(180deg, rgba(86, 210, 241, 1) 0%, rgba(43, 166, 222, 1) 100%);
        --button-fill-blue-hover: linear-gradient(180deg, rgba(75, 200, 230, 1) 0%, rgba(33, 156, 212, 1) 100%);
        --button-fill-blue-active: linear-gradient(180deg, rgba(151, 232, 250, 1) 0%, rgba(94, 205, 242, 1) 100%);

        --button-fill-white: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(242, 242, 242, 1) 100%);
        --button-fill-white-hover: linear-gradient(180deg, rgba(242, 242, 242, 1) 0%, rgba(237, 237, 237, 1) 100%);

        --button-border: 2px solid rgb(255 255 255 / 0.2);

    /* banner */

        --banner-text-error: rgba(227, 56, 50, 1);
        --banner-text-info: rgba(41, 156, 209, 1);
        --banner-text-success: rgba(6, 177, 122, 1);
        --banner-text-warning: rgba(229, 148, 0, 1);

        --banner-border-error: rgba(253, 62, 56, 0.5);
        --banner-border-info: rgba(43, 166, 222, 0.5);
        --banner-border-success: rgba(29, 176, 123, 0.5);
        --banner-border-warning: rgba(255, 165, 0, 0.5);

        --banner-background-error: rgba(253, 62, 56, 0.1);
        --banner-background-info: rgba(43, 166, 222, 0.1);
        --banner-background-success: rgba(29, 176, 123, 0.1);
        --banner-background-warning: rgba(255, 165, 0, 0.1);

        --banner-borderless-background-info: rgba(223, 244, 254, 1);
        --banner-borderless-text-info: rgba(0, 120, 164, 1);

    /* input border */

        --input-text-underline-active: rgba(43, 166, 222, 1);
        --input-text-underline-hover: rgba(43, 166, 222, 1);
        --input-text-underline-error: rgba(255, 51, 58, 1);

    /* checkbox */

        --checkbox-fill-active: linear-gradient(180deg, rgba(14, 217, 177, 1) 0%, rgba(6, 177, 122, 1) 100%);
        --checkbox-fill-inactive: linear-gradient(180deg, rgba(242, 242, 242, 1) 0%, rgba(237, 237, 237, 1) 100%);

        --checkbox-border-inactive: rgba(0, 0, 0, 0.05);

        --checkbox-fill-inactive-2: #FFFFFF;
        --checkbox-border-inactive-2: rgba(85, 85, 85, 1);

    /* radio */

        --radio-fill-active: linear-gradient(180deg, rgba(62, 216, 178, 1) 0%, rgba(29, 176, 123, 1) 100%);
        --radio-fill-inactive: rgba(182, 188, 191, 0.1);

        --radio-border-active: rgba(62, 216, 178, 1);
        --radio-border-inactive: rgba(182, 188, 191, 1);

        --radio-oval-fill: rgba(34, 34, 34, 0.1);

    /* switch */

        --switch-fill-active: linear-gradient(180deg, rgba(14, 217, 177, 1) 0%, rgba(6, 177, 122, 1) 100%);
        --switch-fill-inactive: rgba(182, 191, 189, 0.3);

        --switch-border-active: rgba(0, 0, 0, 0.05);
        --switch-border-inactive: rgba(182, 191, 189, 0.5);

        --switch-handle-fill: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 100%);
        --switch-handle-border: rgba(0, 0, 0, 0.1);

        --switch-handle-active-icon: rgba(11, 196, 153, 1);
        --switch-handle-inactive-icon: rgba(126, 126, 126, 1);

    /* dialog */

        --dialog-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);

    /* dropdown */

        --dropdown-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
        --dropdown-border: 1px solid rgba(238, 238, 238, 1);

    /* toast */

        --toast-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);

    /* dropdowns */

        --dropdown-arrow-color: rgba(255, 255, 255, 1);
        --dropdown-background-color: rgb(255 255 255);

    /* context/dropdown menus */

        --context-menu-border: 1px solid rgba(238, 238, 238, 1);
        --context-menu-background: rgba(255, 255, 255, 1);
        --context-menu-shadow: rgba(0, 0, 0, 0.3);

    /* divider */

        --divider-color: rgba(238, 238, 238, 1);

    /* progress bars */

        --progress-bar-fill1: rgba(217, 0, 7, 1);
        --progress-bar-fill2: rgba(255, 51, 58, 1);
        --progress-bar-fill3: rgba(255, 165, 0, 1);
        --progress-bar-background: rgba(0, 0, 0, 0.2);

    /* progress round */

        --progress-round-fill: rgba(102, 102, 102, 1);

    /* scroll bar */
        --scroll-bar-background: rgba(0, 0, 0, 0.1);
        --scroll-bar-handle: rgba(0, 0, 0, 1);

    /* Initial loading screen bars fill */
        --progress-bar-fill4: rgba(29, 29, 29, 1);

    /* Badges */
        --badge-fill: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(242, 242, 242, 1) 100%);
        --badge-border: rgba(255, 255, 255, 1);
        --badge-search-outline: rgb(0  191 165 / 0.2);

    /* Chips */
    --chips-fill: rgb(245 245 245);
    --chips-border: 2px solid rgb(255 255 255 / 0.7);

    /* inverted */
        --stroke-main-inverted: rgba(51, 51, 51, var(--stroke-alpha, 1));
        --stroke-grey-1-inverted: rgba(34, 34, 34, var(--stroke-alpha, 1));
        --stroke-link-inverted: rgba(103, 103, 103, var(--stroke-alpha, 1));

    /* Discounts */
        --discount-main: rgba(48, 194, 101, 1);


    /* TODO: remove this once the library is updated */
        --surface-overlay-background: rgba(204, 204, 204, var(--surface-alpha, 0.9));
        --surface-main-inverted: rgba(51, 51, 51, var(--surface-alpha, 1));
        --surface-link-inverted: rgba(103, 103, 103, var(--surface-alpha, 1));
        --surface-grey-1-inverted: rgba(34, 34, 34, var(--surface-alpha, 1));
        --stroke-grey-2-inverted: rgba(68, 68, 68, var(--stroke-alpha, 1));
        --text-color-higher-inverted: var(--text-color-white-higher);
        --text-color-high-inverted: var(--text-color-white-high);
        --text-color-medium-inverted: var(--text-color-white-medium);
        --text-color-low-inverted: var(--text-color-white-low);
        --text-color-success-inverted: rgba(90, 254, 232, 1);
        --text-color-error-inverted: rgba(255, 126, 121, 1);
        --icon-rest-inverted: rgba(204, 204, 204, var(--icon-alpha, 1));
        --icon-active-inverted: rgba(255, 255, 255, var(--icon-alpha, 1));

        --secondary-blue-inverted: rgba(111, 215, 255, var(--secondary-alpha, 1));
        --secondary-green-inverted: rgba(129, 207, 179, var(--secondary-alpha, 1));
        --secondary-orange-inverted: rgba(255, 190, 0, var(--secondary-alpha, 1));
        --secondary-red-inverted: rgba(255, 101, 96, var(--secondary-alpha, 1));

    /* TEMP: variables */
        --button-hover: rgba(0, 0, 0, 0.05);

    /* Onboarding */
        --onboarding-step-border: rgba(0, 0, 0, 0.05);
        --onboarding-control-panel-fill: linear-gradient(270deg, rgba(189, 233, 251, 1) 0%, rgba(229, 240, 246, 1) 100%);

    /* Safari gradient bug fix */
    /* Safari only accept same rgb valued transparent for linear gradient otherwise has weird shadow */
        --surface-tree-iconwrap: linear-gradient(90deg, rgba(237, 237, 237, 0), rgba(237, 237, 237, 1) 12px, rgba(237, 237, 237, 1));
        --surface-tree-iconwrap-active: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 1) 12px, rgba(250, 250, 250, 1));
        --surface-tree-iconwrap-rtl: linear-gradient(270deg, rgba(237, 237, 237, 0), rgba(237, 237, 237, 1) 12px, rgba(237, 237, 237, 1));
        --surface-tree-iconwrap-active-rtl: linear-gradient(270deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 1) 12px, rgba(250, 250, 250, 1));

        --surface-tree-iconwrap: linear-gradient(90deg, rgba(247, 247, 247, 0), rgba(247, 247, 247, 1) 12px, rgba(247, 247, 247, 1));
        --surface-tree-iconwrap-active: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 12px, rgba(255, 255, 255, 1));
        --surface-tree-iconwrap-hover: linear-gradient(90deg, rgba(239, 239, 240, 0), rgba(239, 239, 240, 1) 12px, rgba(239, 239, 240, 1));
        --surface-tree-iconwrap-rtl: linear-gradient(270deg, rgba(247, 247, 247, 0), rgba(247, 247, 247, 1) 12px, rgba(247, 247, 247, 1));
        --surface-tree-iconwrap-active-rtl: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 12px, rgba(255, 255, 255, 1));
        --surface-tree-iconwrap-hover-rtl: linear-gradient(270deg, rgba(239, 239, 240, 0), rgba(239, 239, 240, 1) 12px, rgba(239, 239, 240, 1));

    /* FM selection */
        --hover-grey-main: rgba(238, 238, 238, 1);
}

/* dark theme */
.theme-dark,
.theme-dark .custom-alpha,
html .theme-dark-forced {

    /* secondary colors */

        --secondary-blue: rgba(111, 215, 255, var(--secondary-alpha, 1));
        --secondary-green: rgba(129, 207, 179, var(--secondary-alpha, 1));
        --secondary-orange: rgba(255, 190, 0, var(--secondary-alpha, 1));
        --secondary-white: rgba(255, 255, 255, var(--secondary-alpha, 1));
        --secondary-red: rgba(255, 102, 97, var(--secondary-alpha, 1));
        --secondary-grey: rgba(204, 204, 204, var(--secondary-alpha, 1));

    /* surfaces */

        --surface-main: rgba(51, 51, 51, var(--surface-alpha, 1));
        --surface-grey-1: rgba(34, 34, 34, var(--surface-alpha, 1));
        --surface-grey-2: rgba(68, 68, 68, var(--surface-alpha, 1));
        --surface-grey-3: var(--surface-grey-2);
        --surface-grey-4: rgba(34, 34, 34, var(--surface-alpha, 1));
        --surface-grey-5: var(--surface-grey-2);
        --surface-grey-6: var(--surface-black);
        --surface-light-grey: linear-gradient(180deg, rgba(230, 230, 230, var(--surface-alpha, 1)) 0%, rgba(204, 204, 204, var(--surface-alpha, 1)) 100%);
        --surface-mid-grey: rgba(102, 102, 102, var(--surface-alpha, 1));
        --surface-dark-grey: linear-gradient(180deg, rgba(230, 230, 230, var(--surface-alpha, 1)) 0%, rgba(204, 204, 204, var(--surface-alpha, 1)) 100%);
        --surface-black: rgba(0, 0, 0, var(--surface-alpha, 1));
        --surface-black-bar: rgba(0, 0, 0, var(--surface-alpha, 0.7));
        --surface-scrim: rgba(0, 0, 0, var(--surface-alpha, 0.32));
        --surface-warning: linear-gradient(0deg, rgba(255, 235, 0, var(--surface-alpha, 1)) 0%, rgba(255, 211, 0, var(--surface-alpha, 1)) 100%);
        --surface-error: linear-gradient(180deg, rgba(255, 158, 154, var(--surface-alpha, 1)) 0%, rgba(255, 101, 96, var(--surface-alpha, 1)) 100%);
        --surface-error-hover: linear-gradient(180deg, rgba(255, 174, 171, var(--surface-alpha, 1)) 0%, rgba(255, 119, 113, var(--surface-alpha, 1)) 100%);
        --surface-error-active: linear-gradient(180deg, rgba(255, 139, 134, var(--surface-alpha, 1)) 0%, rgba(255, 83, 79, var(--surface-alpha, 1)) 100%);
        --surface-progress-background: linear-gradient(180deg, rgba(230, 230, 230, var(--surface-alpha, 0.3)) 0%, rgba(204, 204, 204, var(--surface-alpha, 0.3)) 100%);
        --surface-overlay: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.7) 100%);
        --surface-highlight-1: rgba(34, 34, 34, var(--surface-alpha, 0.8));
        --surface-highlight-2: rgba(34, 34, 34, var(--surface-alpha, 0.4));
        --surface-inner-shadow: rgba(34, 34, 34, var(--surface-alpha, 0.6));

    /* strokes */

        --stroke-main: rgba(51, 51, 51, var(--stroke-alpha, 1));
        --stroke-grey-1: rgba(34, 34, 34, var(--stroke-alpha, 1));
        --stroke-grey-2: rgba(68, 68, 68, var(--stroke-alpha, 1));
        --stroke-grey-3: rgba(68, 68, 68, var(--stroke-alpha, 1));
        --stroke-grey-4: rgba(34, 34, 34, var(--stroke-alpha, 1));
        --stroke-grey-6: rgba(0, 0, 0, var(--stroke-alpha, 1));
        --stroke-dark-grey: rgba(230, 230, 230, var(--stroke-alpha, 1));
        --stroke-mid-grey: rgba(102, 102, 102, var(--stroke-alpha, 1));
        --stroke-black: rgba(0, 0, 0, var(--stroke-alpha, 1));
        --stroke-info: rgba(111, 215, 255, var(--stroke-alpha, 1));
        --stroke-success: rgba(90, 254, 232, var(--stroke-alpha, 1));
        --stroke-warning: rgba(254, 195, 90, var(--stroke-alpha, 1));
        --stroke-error: rgba(255, 126, 121, var(--stroke-alpha, 1));
        --stroke-highlight: rgba(17, 17, 17, var(--stroke-alpha, 1));
        --stroke-scrim: rgba(0, 0, 0, var(--stroke-alpha, 0.32));
        --stroke-overlay-background: rgba(0, 0, 0, var(--stroke-alpha, 0.8));

    /* icons */

        --icon-rest: rgba(204, 204, 204, var(--icon-alpha, 1));
        --icon-inactive: rgba(255, 255, 255, var(--icon-alpha, 0.3));
        --icon-active: rgba(255, 255, 255, var(--icon-alpha, 1));

    /* table */

        --table-border: rgba(68, 68, 68, 1);

    /* text */

        --text-color-higher: var(--text-color-white-higher);
        --text-color-high: var(--text-color-white-high);
        --text-color-medium: var(--text-color-white-medium);
        --text-color-low: var(--text-color-white-low);
        --text-color-info: rgba(111, 215, 255, 1);
        --text-color-success: rgba(90, 254, 232, 1);
        --text-color-warning: rgba(254, 195, 90, 1);
        --text-color-error: rgba(255, 126, 121, 1);
        --text-color-medium-sensitive: var(--text-color-white-medium-sensitive);

    /* button */

        --button-fill-positive: linear-gradient(180deg, rgba(14, 217, 177, 1) 0%, rgba(6, 177, 122, 1) 100%);
        --button-fill-positive-hover: linear-gradient(180deg, rgba(17, 226, 193, 1) 0%, rgba(7, 193, 140, 1) 100%);
        --button-fill-positive-active: linear-gradient(180deg, rgba(10, 206, 160, 1) 0%, rgba(4, 160, 103, 1) 100%);

        --button-fill-blue: linear-gradient(180deg, rgba(132, 224, 248, 1) 0%, rgba(77, 190, 238, 1) 100%);
        --button-fill-blue-hover: linear-gradient(180deg, rgba(151, 232, 250, 1) 0%, rgba(94, 205, 242, 1) 100%);
        --button-fill-blue-active: linear-gradient(180deg, rgba(112, 215, 244, 1) 0%, rgba(61, 176, 233, 1) 100%);

    /* banner */

        --banner-text-error: rgba(255, 255, 255, 1);
        --banner-text-info: rgba(255, 255, 255, 1);
        --banner-text-success: rgba(255, 255, 255, 1);
        --banner-text-warning: rgba(255, 255, 255, 1);
        --banner-border-error: rgba(253, 62, 56, 1);
        --banner-border-info: rgba(43, 166, 222, 1);
        --banner-border-success: rgba(29, 176, 123, 1);
        --banner-border-warning: rgba(255, 165, 0, 1);
        --banner-background-error: rgba(253, 62, 56, 0.5);
        --banner-background-info: rgba(43, 166, 222, 0.5);
        --banner-background-success: rgba(29, 176, 123, 0.5);
        --banner-background-warning: rgba(255, 165, 0, 0.5);


    /* input border */

        --input-text-underline-active: rgba(111, 215, 255, 1);
        --input-text-underline-hover: rgba(111, 215, 255, 1);
        --input-text-underline-error: rgba(255, 51, 58, 1);


    /* checkbox */

        --checkbox-fill-active: linear-gradient(180deg, rgba(8, 231, 192, 1) 0%, rgba(3, 202, 139, 1) 100%);
        --checkbox-fill-inactive: linear-gradient(180deg, rgba(159, 159, 159, 1) 0%, rgba(102, 102, 102, 1) 100%);
        --checkbox-border-inactive: rgba(255, 255, 255, 0.1);


        --checkbox-fill-inactive-2: #444444;
        --checkbox-border-inactive-2: rgba(230, 230, 230, 1);


    /* radio */

        --radio-fill-active: linear-gradient(180deg, rgba(14, 217, 177, 1) 0%, rgba(6, 177, 122, 1) 100%);
        --radio-fill-inactive: linear-gradient(180deg, rgba(159, 159, 159, 1) 0%, rgba(102, 102, 102, 1) 100%);
        --radio-border-active: rgba(14, 217, 177, 1);
        --radio-border-inactive: rgba(255, 255, 255, 0.1);
        --radio-oval-fill: rgba(255, 255, 255, 0.3);


    /* switch */

        --switch-fill-active: linear-gradient(180deg, rgba(8, 231, 192, 1) 0%, rgba(3, 202, 139, 1) 100%);
        --switch-fill-inactive: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
        --switch-border-active: rgba(255, 255, 255, 0.1);
        --switch-border-inactive: rgba(255, 255, 255, 0.1);
        --switch-handle-fill: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 100%);
        --switch-handle-border: rgba(0, 0, 0, 0.05);
        --switch-handle-active-icon: rgba(11, 196, 153, 1);
        --switch-handle-inactive-icon: rgba(126, 126, 126, 1);


    /* dialog */

        --dialog-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.7);
        --dialog-shadow-thin: 0 1px 2px 0 rgba(0, 0, 0, 0.1);


    /* dropdown/tooltip */

        --dropdown-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.7);
        --dropdown-border: 1px solid rgba(68, 68, 68, 1);

    /* toast */

        --toast-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.7);

    /* dropdowns */

        --dropdown-arrow-color: rgba(51, 51, 51, 1);
        --dropdown-background-color: rgb(51 51 51);

    /* context/dropdown menus */

        --context-menu-border: 1px solid rgba(68, 68, 68, 1);
        --context-menu-background: rgba(68, 68, 68, 1);
        --context-menu-shadow: rgba(0, 0, 0, 0.3);

    /* divider */

        --divider-color: rgba(255, 255, 255, 0.1);

    /* progress bars */

        --progress-bar-fill1: rgba(217, 0, 7, 1);
        --progress-bar-fill2: rgba(255, 51, 58, 1);
        --progress-bar-fill3: rgba(255, 165, 0, 1);
        --progress-bar-background: rgba(255, 255, 255, 0.2);

    /* progress */

    --progress-fill: rgba(204, 204, 204, 1);

    /* scroll bar */
        --scroll-bar-background: rgba(0, 0, 0, 0.2);
        --scroll-bar-handle: rgba(255, 255, 255, 1);

    /* Initial loading screen bars fill */

        --progress-bar-fill4: rgba(29, 29, 29, 1);

    /* Badges */
        --badge-fill: linear-gradient(180deg, rgba(159, 159, 159, 1) 0%, rgba(102, 102, 102, 1) 100%);
        --badge-border: rgba(51, 51, 51, 1);
        --badge-search-outline: rgb(0  191 165 / 0.2);

    /* Chips */
        --chips-fill: rgb(84 84 84);
        --chips-border: 2px solid rgb(0 0 0 / 0.05);

    /* inverted */
        --stroke-main-inverted: rgba(255, 255, 255, var(--stroke-alpha, 1));
        --stroke-grey-1-inverted: rgba(250, 250, 250, var(--stroke-alpha, 1));
        --stroke-link-inverted: rgba(199, 199, 199, var(--stroke-alpha, 1));

    /* TODO: remove this once the library is updated */

        --surface-overlay-background: rgba(0, 0, 0, var(--surface-alpha, 0.8));
        --surface-main-inverted: rgba(255, 255, 255, var(--surface-alpha, 1));
        --surface-link-inverted: rgba(199, 199, 199, var(--surface-alpha, 1));
        --surface-grey-1-inverted: rgba(250, 250, 250, var(--surface-alpha, 1));
        --stroke-grey-2-inverted: rgba(238, 238, 238, var(--stroke-alpha, 1));
        --text-color-higher-inverted: var(--text-color-black-higher);
        --text-color-high-inverted: var(--text-color-black-high);
        --text-color-medium-inverted: var(--text-color-black-medium);
        --text-color-low-inverted: var(--text-color-black-low);
        --text-color-success-inverted: rgba(0, 191, 165, 1);
        --text-color-error-inverted: rgba(253, 62, 56, 1);
        --icon-rest-inverted: rgba(51, 51, 51, var(--icon-rest-alpha, 0.7));
        --icon-active-inverted: rgba(51, 51, 51, var(--icon-active-alpha, 1));

        --secondary-blue-inverted: rgba(43, 166, 222, var(--secondary-alpha, 1));
        --secondary-green-inverted: rgba(29, 176, 123, var(--secondary-alpha, 1));
        --secondary-orange-inverted: rgba(255, 165, 0, var(--secondary-alpha, 1));
        --secondary-red-inverted: rgba(253, 62, 56, var(--secondary-alpha, 1));

    /* TEMP: variables */

        --button-hover: rgba(255, 255, 255, 0.1);

    /* Onboarding */
        --onboarding-step-border: rgba(0, 0, 0, 0.05);
        --onboarding-control-panel-fill: linear-gradient(270deg, rgba(7, 54, 73, 1) 0%, rgba(19, 89, 127, 1) 100%);

    /* Safari gradient bug fix - Safari only accept same rgb valued transparent for linear gradient otherwise has weird shadow */
        --surface-tree-iconwrap: linear-gradient(90deg, rgba(34, 34, 35, 0), rgba(34, 34, 35, 1) 12px, rgba(34, 34, 35, 1));
        --surface-tree-iconwrap-active: linear-gradient(90deg, rgba(21, 22, 22, 0), rgba(21, 22, 22, 1) 12px, rgba(21, 22, 22, 1));
        --surface-tree-iconwrap-hover: linear-gradient(90deg, rgba(42, 43, 44, 0), rgba(42, 43, 44, 1) 12px, rgba(42, 43, 44, 1));
        --surface-tree-iconwrap-rtl: linear-gradient(270deg, rgba(34, 34, 35, 0), rgba(34, 34, 35, 1) 12px, rgba(34, 34, 35, 1));
        --surface-tree-iconwrap-active-rtl: linear-gradient(270deg, rgba(21, 22, 22, 0), rgba(21, 22, 22, 1) 12px, rgba(21, 22, 22, 1));
        --surface-tree-iconwrap-hover-rtl: linear-gradient(270deg, rgba(42, 43, 44, 0), rgba(42, 43, 44, 1) 12px, rgba(42, 43, 44, 1));
}
